今天要來也是要來負能量，一開始寫了第一次忘記修改到標題，到後面才發現到趕快發現到，想說可以按下發文就可以，想說可以按下發文就可以結束今天工作，結果很剛好不知道按到啥，畫面一跳悲劇囉剛剛打的全部消失，真的WTF，還是得繼續寫今天鐵人內容，以下我們還是利用範例快點開始吧

/*scss編譯前*/

$list: 10px 12px 16px;

.ex1 {
  font-size: nth($list, 2);
}

```css

/*編譯後css*/

.ex1 {
  font-size: 12px;
}

上面這個範例很簡單，我們透過使用nth取得到＄list第二筆資料12px，通常我們會把list跟我們在Js上的陣列去做
比較，通常我們在Js習慣上第一筆通常是使用0開始，不過在scss使用的時候必須要知道第一筆開始是由1開始，所以我
們去取得資料，使用2的話確實拿到第二筆資料

/*scss編譯前*/

$myFrame: ag, react, vue;
$myColor: red, blue, green;
$FindIndex: index($myFrame, vue);

p {
  color: nth($myColor, $FindIndex);
}

/*編譯後css*/

.ex2 {
  color: green;
}

上面這個範例我們可以透過，index這個功能找到我們對應的值，拿到陣列中是第幾筆資料，如上面的範例，我們先使用了FindIndex這個找到vue這個值是在myFrame的第3個位置，拿到這個索引我們去跟顏色這個list去拿到他的第3個
位置的值，拿到就是green這個值，不過以上這個用法有一個缺點，必須要確認兩筆資料長度必須要一樣，在設計時候必須也要自己確定相同的索引對到是否跟自己預期要配對值一樣，向範例中我們是拿$myFrame最後一個第三個位置的值，這時候$myColor萬一只有兩個值red跟blue這時候我們很開心按下編譯就會炸裂囉就編譯不出來，以上就是list操作上的細節